<template>
  <div id="websiteSetting" class="container">
    <h3 class="title">
      <span />
      网站静态化
    </h3>
    <el-tabs
      id="tabcard"
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="栏目静态化" name="basic">
        <el-form
          ref="basicForm"
          :model="basicForm"
          class="form"
          label-width="140px"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="选择语言:">
                <el-select
                  v-model="lang"
                  placeholder="请选择"
                  @change="changLang"
                >
                  <el-option
                    v-for="item in langList"
                    :key="item.id"
                    :label="item.lang"
                    :value="item.lang"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="选择栏目:">
                <el-select v-model="category_id" placeholder="请选择栏目">
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="是否更新子栏目:">
                <el-radio-group v-model="has_child">
                  <el-radio :label="1">更新子级栏目</el-radio>
                  <el-radio :label="2">仅更新所选栏目</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              v-loading.fullscreen.lock="loading"
              class="save"
              type="primary"
              size="small"
              @click="save(1)"
            >
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文章静态化" name="lang">
        <el-form
          ref="basicForm"
          :model="basicForm"
          class="form"
          label-width="140px"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="选择语言:">
                <el-select
                  v-model="lang"
                  placeholder="请选择"
                  @change="changLang"
                >
                  <el-option
                    v-for="item in langList"
                    :key="item.id"
                    :label="item.lang"
                    :value="item.lang"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="选择栏目:">
                <el-select v-model="category_id" placeholder="请选择栏目">
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              v-loading.fullscreen.lock="loading"
              class="save"
              type="primary"
              size="small"
              @click="save(2)"
            >
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
var token = 'Bearer ' + getToken()
import websiteApi from '@/api/website'
import moduleApi from '@/api/module'
import websettingApi from '@/api/websetting'
export default {
  components: {},
  data() {
    return {
      loading: false,
      attachmentLimit: 10,
      dialogShow: false,
      attachmentData: [],
      imagelist: [],
      myHeaders: { Authorization: token },
      headers: {},
      logoUrl: '',
      wechatUrl: '',
      imgUrl: this.$store.getters.updateURL,
      options: [], // 站点
      activeName: 'basic',
      websiteId: '',
      langList: [],
      lang: '',
      categoryList: [],
      category_id: 0,
      has_child: 1,
      siteId: '',
      basicForm: {}
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      console.log(val, value)
      this.siteId = val
      console.log(this.siteId)
      this.getLang()
    }
  },
  created() {
    // this.getWeblist()
    this.siteId = this.$store.getters.siteId
    console.log(this.$store.getters)
    if (this.siteId) {
      this.getLang()
    }
  },
  methods: {
    // 切换语言
    changLang(val) {
      this.lang = val
      this.getBasciInfo()
      this.getCategoryList()
    },
    // 获取语言
    getLang() {
      websettingApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.lang = res.data[0].lang
          this.getCategoryList()
        }
        this.getBasciInfo()
      })
    },
    getCategoryList() {
      moduleApi
        .getModuleCate({ site_id: [this.siteId], lang: this.lang })
        .then(res => {
          if (res.code == 0) {
            this.categoryList = res.data[0].category
            this.categoryList.unshift({
              id: 0,
              title: '全部'
            })
          }
        })
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      this.getLang()
    },

    // 获取基本信息
    getBasciInfo() {},
    // 保存编辑
    save(type = 1) {
      this.loading = true
      const val = {
        site_id: this.siteId,
        lang: this.lang,
        category_id: this.category_id
      }
      if (type == 1) {
        val.has_child = this.has_child
        websiteApi.createCategory(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
      } else {
        websiteApi.createContent(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
      }
    }
  }
}
</script>

<style lang="scss">
.attachment .el-dialog {
  height: 640px;
}
#websiteSetting {
  .el-form-item__content {
    line-height: 0 !important;
  }
}
</style>
<style scoped lang="scss">
// .el-table{
//   .attachment{
//     width: 60px;
//   }
// }

.form {
  width: 95%;
  // max-width: 700px;
  margin-top: 20px;
  .el-select {
    width: 100%;
  }
}
.search {
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
}
.avatar {
  width: 150px;
}
</style>
